<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Welcome you</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Smooth Sliding Forms template Responsive, Login form web template,Flat Pricing w3tables,Flat Drop downs  Sign up Web Templates, Flat Web Templates, Login sign up Responsive web template, SmartPhone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link th:href="@{static/supercat/css/style.css}" rel="stylesheet" type="text/css" media="all" />
<!-- //Custom Theme files -->

<!-- font-awesome icons -->
<link th:href="@{static/supercat/css/font-awesome.css}" rel="stylesheet">
<!-- //font-awesome icons -->

<!-- web font -->
<link href="/fonts.googleapis.com/css?family=Cormorant+Unicase:300,400,500,600,700" rel="stylesheet"><!--web font-->
<!-- //web font -->
</head>
<body>
	<!-- main -->
	<div class="main agileits-w3layouts">
		<h1>Super-Cat</h1>
		<div class="main-agileinfo"> 
			<div class="agileui-forms">
				<div class="container-form">
					<div class="form-item log-in"><!-- login form-->
						<div class="w3table agileinfo"> 
							<div class="w3table-cell register"> 
								<div class="w3table-tophead">
									<h2>Sign in</h2>
								</div>
								<form action="#" method="post">
									<div class="fields-grid">
										<div class="styled-input agile-styled-input-top">
											<input type="text" name="username" required="">
											<label>Username</label>
											<span></span>
										</div>
										<div class="styled-input">
											<input type="Password" name="password" required="">
											<label>Password</label>
											<span></span>
										</div>
										<a href="#">forgot password?</a>										
										<input type="submit" value="Sign in"> 
									</div>
									<div class="social-grids">
										<div class="social-text">
											<p>Or Sign in with</p>
										</div>
										<div class="social-icons">
											<ul>
												<li><a href="#"><i class="fa fa-facebook"></i></a></li>
												<li><a href="#"><i class="fa fa-twitter"></i></a></li>
												<li><a href="#"><i class="fa fa-rss"></i></a></li>
											</ul>
										</div>
										<div class="clear"> </div>
									</div>

								</form>  
							</div>
						</div>
					</div>
					<div class="form-item sign-up"><!-- sign-up form-->
						<div class="w3table w3-agileits">
							<div class="w3table-cell register">   
									<h3>Sign up</h3>
								<form action="/user/create" method="post">
									<div class="fields-grid">
										<div class="styled-input agile-styled-input-top">
											<input type="text" name="name" required="">
											<label>Name</label>
											<span></span>
										</div>
										<div class="styled-input">
											<input type="email" name="email" required="">
											<label>Email</label>
											<span></span>
										</div>
										<div class="styled-input">
											<input type="tel" name="mobilePhone" required="">
											<label>Phone Number</label>
											<span></span>
										</div>
										<div class="styled-input">
											<input type="password" name="password" required="">
											<label>Password</label>
											<span></span>
										</div>
										<div class="clear"> </div>
										 <label class="checkbox"><input type="checkbox" name="checkbox" checked><i></i>I agree to the <a href="#">Terms and Conditions</a></label>
									</div>
									<input type="submit" value="Sign up">
								</form>

							</div>
						</div>
					</div>
				</div>
				<div class="container-info">
					<div class="info-w3lsitem">
						<div class="w3table">
							<div class="w3table-cell">
								<p> Have an account? </p>
								<div class="btn"> Sign in </div>
							</div>
						</div>
					</div>
					<div class="info-w3lsitem">
						<div class="w3table">
							<div class="w3table-cell">
								<p> Dont have an account?</p>
								<div class="btn">Sign up</div>
							</div>
						</div>
					</div>
					<div class="clear"> </div>
				</div> 
				
				
			</div> 
		</div>	
	</div>   
	<!-- //main -->
	<!-- js -->  
	<script th:src="@{static/adminlte/bower_components/jquery/jquery-2.2.3.min.js}"></script>
	<script>
		$(".info-w3lsitem .btn").click(function() {
			  $(".main-agileinfo").toggleClass("log-in");
			});
			$(".container-form .btn").click(function() {
			  $(".main-agileinfo").addClass("active");
		});
	</script>
	<!-- //js --> 
</body>
</html>